<template>
  <div class="class-ranking" >
    <div class="class-rank-title" >
      <p class="tit" >班级排行榜</p>
      <p class="out" >导出表格</p>
    </div>
    <ul class="list-detail" >
      <li>
        <p>
          <el-dropdown trigger="click" @command="handleCommandGlass">
            <span class="el-dropdown-link">
              <span v-if="glassname == ''">班级名称</span>
              <el-tooltip
                v-else
                effect="dark"
                :visible-arrow="false"
                :offset="16"
                :content="glassname"
                placement="right-end">
                <span class="text glass-name">{{ glassname }}</span>
              </el-tooltip>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in gradeList" :key="item.id" :command="item.name" >{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
        <p>
          <el-dropdown trigger="click" @command="handleCommandCourse">
            <span class="el-dropdown-link">
              <span v-if="coursename == ''">课程</span>
              <el-tooltip
                v-else
                effect="dark"
                :visible-arrow="false"
                :offset="16"
                :content="coursename"
                placement="right-end">
                <span class="text">{{ coursename }}</span>
              </el-tooltip>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in courseList" :key="item.id" :command="item.name">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
        <p style="color:#999999" >排名</p>
      </li>
      <li v-for="item in grdedList" :key="item.score" >
        <p>{{item.score}}</p>
        <p>{{item.name}}</p>
        <p>{{item.rank}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "GradeRankingList",
  components: {},
  data() {
    return {
      glassname:'',
      coursename:'',
      grdedList: [
        {score: '1', name: '数学课', rank: '1/5'},
        {score: '2', name: '英语课', rank: '2/5'},
      ],
    }
  },

  computed: {
    ...mapState(["courseList", "gradeList"])
  },

  mounted() {},

  methods: {
    handleCommandCourse(command) {
      this.coursename = command;
    },

    handleCommandGlass(command) {
      this.glassname = command;
    },
  }
}
</script>

<style scoped lang="scss">
.class-ranking {
  margin-bottom: 20px;
  background: white;

  .class-rank-title {
    height: 58px;
    line-height: 58px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(40, 47, 54, 0.15);

    .tit {
      font-size: 18px;
      margin-left: 19px;
      font-weight: 400;
    }

    .out {
      margin-right: 18px;
      color: #1A73FF;
      cursor: pointer;
    }
  }

  .list-detail {
    padding: 5px 19px 14px;

    li {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      p {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
    }

    li:nth-child(1) {
      border-bottom: 1px solid rgba(40, 47, 54, 0.15);
    }
  }
}
</style>
